<template>
  <view class="page">
    <view class="main">
      <view class="title">
        {{ info.title }}
      </view>
      <view class="content">
        <view class="authorBox">
          <view class="leftBox">
            <image
                :src="info.avatar"></image>
          </view>
          <view class="rightBox">
            <view class="name">
              {{info.nickname}}
            </view>
            <view class="time">
              {{ info.createTime }}
            </view>
          </view>
        </view>
        <view class="textBox" v-html="info.content">
          {{info.content}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getArticle } from "../../request/api";

export default {
  data () {
    return {
      info: ''
    };
  },
  onLoad (data) {
    getArticle({
      articleId: parseInt(data.articleId)
    }).then(res => {
      let info = res.data.data
      let date=new Date(res.data.data.createTime)
      info.createTime=date.getUTCFullYear().toString()+'-'+(date.getUTCMonth()+1)+'-'+date.getUTCDate()
      //测试替换文本
      // info.content=info.content.replace(/good/,'<img style="width: 100%" src="../../static/activity/logo1.svg"/>')
      this.info =info

    })
  }
}
</script>

<style scoped lang="less">

.page {
  background-color: rgba(230, 230, 230);
  padding: 3vw;
  .main {
    background-color: white;
    border-radius: 10px;
    min-height: 92vh;
    .title{
		width: 94%;
      // text-indent: 1em;
      height: 2.5em;
      // line-height: 2.5em;
      font-size: 110%;
      font-weight: 600;
	  padding-top: 2vh;
	  padding-left: 3%;
	  
    }
    .content{
      padding: 15px;
      overflow: auto;

      .authorBox{
        display: flex;
        .leftBox{
            image{
              width: 50px;
              height: 50px;
              border-radius: 50%;
            }
        }
        .rightBox{
          margin-left: 15px;
          padding-top: 1px;
          .name{
            font-weight: 700;
            font-size: 98%;
          }
          .time{
            color: rgba(200,200,200);
            line-height: 35px;
            font-size: 95%;
          }
        }
      }
      .textBox{
        text-indent: 1.5em;
        margin-top:10px;
        line-height: 28px;
        font-weight: 500;
      }
    }
  }

}
</style>
